import React, { useEffect, useState } from 'react';
import { Button, Col, Form, Input, message, Row, Select, DatePicker } from 'antd';
import { ConnectState } from '@/pages/pricing/models/connect';
import { connect, Dispatch } from 'umi';
import dayjs from 'dayjs'
import { AdjustTheRecordState } from '@/pages/pricing/type';
import styles from './index.less';
import { getCategoryList } from '@/pages/pricing/service/pricingSystemService';


const mapStateToProps = ({ adjustTheRecordStore }: ConnectState) => {
    return {
        ...adjustTheRecordStore
    }
}



interface IAdjustTheRecordHead extends AdjustTheRecordState {
    dispatch: Dispatch;
}

const AdjustTheRecordHead: React.FC<IAdjustTheRecordHead> = (props) => {

    const [form] = Form.useForm()


    const [categoryList, setCategoryList] = useState<Array<{ gradeStructureNode: string, gradeStructureNodeDescribe: string, [name: string]: any }>>(
        [
            {
                gradeStructureNode: '',
                gradeStructureNodeDescribe: ''
            }
        ]
    )

    useEffect(() => {
        getCategory()
        refresh()
    }, [])

    // 获取商品类别（获取所有品类）
    const getCategory = async () => {
        try {
            const res: any = await getCategoryList()
            console.log(res);

            if (res?.code !== 0) {
                return message.error(res?.msg || '商品类别获取失败')
            }
            setCategoryList(res?.data)
        } catch (error: any) {
            if (error.message === 'Failed to fetch') {
                return message.error('网络错误')
            }
            message.error(error.message || error || "商品类别获取失败")
        }

    }

    // 查询
    const search = () => {
        const formValue = form.getFieldsValue(true)
        // console.log(formValue);
        let params = {
            searchKey: formValue?.searchKey ?? '',
            searchType: formValue?.searchType ?? '',
            startDate: formValue?.searchTime?.length ? dayjs(formValue?.searchTime[0]).format('YYYY-MM-DD') : '',
            endDate: formValue?.searchTime?.length ? dayjs(formValue?.searchTime[1]).format('YYYY-MM-DD') : '',
        }
        // console.log(params);
        props?.dispatch({
            type: 'adjustTheRecordStore/getAdjustTheRecordListquery',
            payload: {
                ...params,
                pageNum: 1,
            }
        })
        props?.dispatch({
            type: 'adjustTheRecordStore/setQureyInfo',
            payload: {
                ...params,
                pageNum: 1,
            }
        })
    }

    // 重置
    const refresh = () => {
        let params = {
            searchKey: '',
            searchType: '',
            startDate: '',
            endDate: '',
            pageNum: 1,
            pageSize: 10
        }
        props?.dispatch({
            type: 'adjustTheRecordStore/getAdjustTheRecordListquery',
            payload: {
                ...params
            }
        })
        props?.dispatch({
            type: 'adjustTheRecordStore/setQureyInfo',
            payload: {
                ...params
            }
        })
        form.resetFields()
    }

    return (
        <div className={styles.adjustTheRecordHead}>
            <Form form={form}>
                <Row gutter={16}>
                    {/* <Col xs={24} sm={24} md={12} lg={12} xl={12} xxl={6}>
                        <Form.Item
                            label='商品编码'
                            name={'goodsCode'}
                        >
                            <Input.Search className={styles.search} placeholder='商品编码' onSearch={searchCommodity} />
                        </Form.Item>
                    </Col> */}
                    <Col flex={'auto'}>
                        <Row gutter={16}>
                            <Col xs={24} sm={24} md={12} lg={12} xl={12} xxl={7}>
                                <Form.Item
                                    label='商品名称/编码'
                                    name={'searchKey'}
                                >
                                    <Input.Search className={styles.search} placeholder='商品名称/编码' />
                                </Form.Item>
                            </Col>
                            <Col xs={24} sm={24} md={12} lg={12} xl={12} xxl={6}>
                                <Form.Item
                                    label='商品类别'
                                    name={'searchType'}
                                >
                                    <Select
                                        placeholder='请选择'
                                        allowClear
                                    >
                                        {categoryList?.map((category, index) => {
                                            return <Select.Option key={index} value={category?.gradeStructureNode}>{category?.gradeStructureNodeDescribe}</Select.Option>

                                        })}
                                    </Select>
                                </Form.Item>
                            </Col>
                            <Col xs={24} sm={24} md={12} lg={12} xl={12} xxl={6}>
                                <Form.Item
                                    label='调价时间'
                                    name={'searchTime'}
                                >
                                    <DatePicker.RangePicker />
                                </Form.Item>
                            </Col>
                        </Row>
                    </Col>
                    <Col flex={'200px'} className={styles.btns}>
                        <Form.Item>
                            <Button type='primary' onClick={search}>查询</Button>
                            <Button type='ghost' onClick={refresh}>重置</Button>
                        </Form.Item>
                    </Col>

                </Row>
            </Form>
        </div>
    )
}

export default connect(mapStateToProps)(AdjustTheRecordHead)
